<template>
  <div class="mask" @click.self="showState(false)" v-show="isShow">
    <div class="context-menu">
      <div class="menu-item" v-for="(item, i) in optList" :key="i" @click="changeTheme(item.code)">
        <div class="menu-item-color" :class="getMenuClass(item)"></div>
        <div>{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>
<script lang='ts' setup>
import { ref, Ref, reactive, onBeforeMount, defineExpose } from 'vue';

interface OptList {
  name: string
  code: string
  cssName: string
}

let theme: Ref<string> = ref('defaultTheme')
const isShow = ref<boolean>(false)

const optList: Array<OptList> = reactive([
  {
    name: '标准白',
    code: 'defaultTheme',
    cssName: 'white'
  },
  {
    name: '商务灰',
    code: 'businessGrey',
    cssName: 'gray'
  },
  {
    name: '科技蓝',
    code: 'technologyBlue',
    cssName: 'blue'
  }
])

const getMenuClass = (item: OptList) => {
  if (theme.value === item.code) {
    return item.cssName + ' activeColor'
  } else {
    return item.cssName
  }
}

const showState = (state: boolean) => {
  isShow.value = state;
}

const changeTheme = (_theme: string) => {
  document.documentElement.setAttribute('theme', _theme)
  localStorage.setItem('theme', _theme)
  theme.value = _theme;
}

onBeforeMount(() => {
  changeTheme(localStorage.getItem('theme') || 'defaultTheme')
});

defineExpose({
  showState
})
</script>
<style lang="scss" scoped>
.mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
}
.context-menu {
  position: fixed;
  top: 50px;
  right: 160px;
  z-index: 99;
  width: 190px;
  height: 100px;
  border-radius: 4px;
  display: flex;
  background-color: var(--context-menu-bg-color);
  box-shadow: 0px 4px 15px 1px var(--context-menu-boxshadow-color);
  text-align: center;

  .menu-item {
    flex: 1;
    background-color: var(--context-menu-item-bg-color);
    color: var(--context-menu-item-color);
    font-size: 14px;

    .menu-item-color {
      width: 39px;
      height: 39px;
      border: 2px solid var(--context-menu-item-border-color);
      border-radius: 50%;
      margin: 20px auto 10px;

      &.activeColor {
        border-color: var(--context-menu-item-active-border-color);
      }
    }
  }

  .white {
    background-color: #fff;
  }
  .gray {
    background-color: gray;
  }
  .blue {
    background-color: #081027;
  }
}
</style>